<template>
  <div class="main_box">
    <el-row class="boxRow">
      <el-col class="boxMain_one">
        <div class="d-flex flex-column h-100">
          <div class="d-flex align-items-center h-15">
            <div class="line-title"></div>
            <div class="title">系统异常信息</div>
          </div>
          <div class="h-85 pt-2 py-1">
            <div class="d-flex w-100 h-50 pb-2">
              <el-row class="left_box">
                <el-col :span="10">
                  <img src="../../../assets/img/icon1.png" alt="" class="left_img" />
                </el-col>
                <el-col :span="14" class="d-flex flex-column align-items-center justify-content-center over-auto">
                  <div class="value">{{ info.deviceTotalFault }}</div>
                  <div class="name mt-2 text-center">总设备故障</div>
                </el-col>
              </el-row>
              <el-row class="left_box lastLine">
                <el-col :span="10">
                  <img src="../../../assets/img/icon2.png" alt="" class="left_img" />
                </el-col>
                <el-col :span="14" class="d-flex flex-column align-items-center justify-content-center over-auto">
                  <div class="value">{{ info.sysFaultTotal }}</div>
                  <div class="name mt-2 text-center">总系统异常</div>
                </el-col>
              </el-row>
            </div>
            <div class="d-flex w-100 h-50 pt-2">
              <el-row class="left_box">
                <el-col :span="10">
                  <img src="../../../assets/img/icon3.png" alt="" class="left_img" />
                </el-col>
                <el-col :span="14" class="d-flex flex-column align-items-center justify-content-center over-auto">
                  <div class="value">{{ info.todayDeviceFaultTotal }}</div>
                  <div class="name mt-2 text-center">今日设备故障</div>
                </el-col>
              </el-row>
              <el-row class="left_box lastLine">
                <el-col :span="10">
                  <img src="../../../assets/img/icon4.png" alt="" class="left_img" />
                </el-col>
                <el-col :span="14" class="d-flex flex-column align-items-center justify-content-center over-auto">
                  <div class="value">{{ info.todaySysFaultTotal }}</div>
                  <div class="name mt-2 text-center">今日系统异常</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="boxMain_one">
        <div class="d-flex flex-column h-100">
          <div class="d-flex align-items-center h-15">
            <div class="line-title"></div>
            <div class="title">系统运行状态</div>
          </div>
          <div class="h-85 pt-2 py-1">
            <div class="d-flex w-100 h-50 pb-2">
              <div class="show_box over-auto">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                  <div class="font-12 text-secondary">在线数量</div>
                  <i class="el-icon-info text-secondary"></i>
                </div>
                <div class="value mt-2 flex-grow-1">
                  {{ info.deviceOnlineTotal }}
                </div>
                <el-progress :percentage="(info.deviceOnlineTotal / info.deviceTotal) * 100" color="#ffaa47" :show-text="false" class="mt-2 flex-grow-1"></el-progress>
              </div>
              <div class="show_box lastLine over-auto">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                  <div class="font-12 text-secondary">离线数量</div>
                  <i class="el-icon-info text-secondary"></i>
                </div>
                <div class="value mt-2 flex-grow-1">
                  {{ info.deviceOfflineTotal }}
                </div>
                <el-progress :percentage="(info.deviceOfflineTotal / info.deviceTotal) * 100" color="#87f7c7" :show-text="false" class="mt-2 flex-grow-1"></el-progress>
              </div>
            </div>
            <div class="d-flex w-100 h-50 pt-2">
              <div class="only_box over-auto">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                  <div class="font-12 text-secondary">总设备数</div>
                  <i class="el-icon-info text-secondary"></i>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2 flex-grow-1">
                  <div class="value">{{ info.deviceTotal }}</div>
                  <!-- <div class="add_text">+30%↑</div> -->
                </div>
                <el-progress :percentage="100" color="#7f8cfd" :show-text="false" class="mt-2 flex-grow-1"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="boxMain_two" :class="!isStart && data == null ? 'not_config' : ''">
        <div class="deploy" v-if="!isView">
          <el-row class="area">
            <el-col :span="12">区域四</el-col>
            <el-col :span="12">区域五</el-col>
            <el-col :span="8">区域一</el-col>
            <el-col :span="8">区域二</el-col>
            <el-col :span="8">区域三</el-col>
          </el-row>
          <el-button type="primary" size="small" @click="setDeploy('eightParam')" style="z-index: 1999">配 置</el-button>
        </div>
        <div class="d-flex flex-column h-100" v-if="!isStart && data != null">
          <div class="d-flex align-items-center h-15">
            <div class="line-title"></div>
            <div class="title">系统运行信息</div>
          </div>
          <div class="d-flex flex-column h-85 pt-2 py-1">
            <div class="d-flex w-100 h-50 pb-2">
              <div class="show_box over-auto">
                <div class="d-flex justify-content-between flex-grow-1">
                  <div class="show_name">总功率</div>
                  <div class="show_unit">单位：（W）</div>
                </div>
                <div class="show_valOne mt-1 flex-grow-1">
                  {{ data.powerTotal == null ? 0 : data.powerTotal[0].value }}
                </div>
                <img src="../../../assets/img/icon5.png" alt="" class="show_img flex-grow-1" />
              </div>
              <div class="show_box lastLine over-auto">
                <div class="d-flex justify-content-between flex-grow-1">
                  <div class="show_name">总用电量</div>
                  <div class="show_unit">单位：（kw*h）</div>
                </div>
                <div class="show_valTwo mt-1 flex-grow-1">
                  {{ data.chargeTotal == null ? 0 : data.chargeTotal[0].value }}
                </div>
                <img src="../../../assets/img/icon6.png" alt="" class="show_img flex-grow-1" />
              </div>
            </div>
            <div class="d-flex w-100 h-50 pt-2">
              <div class="info_box" style="background-color: #48d3ff">
                <div>电压信息</div>
                <div class="tab mt-2">
                  <div class="item" v-for="(item, index) in data.voltage" :key="index">
                    <div class="info_valOne">{{ item.value }}</div>
                    <div class="info_name">{{ item.name }}</div>
                  </div>
                </div>
              </div>
              <div class="info_box" style="background-color: #fec347">
                <div>电流信息</div>
                <div class="tab mt-2">
                  <div class="item" v-for="(iten, indey) in data.current" :key="indey">
                    <div class="info_valOne">{{ iten.value }}</div>
                    <div class="info_name">{{ iten.name }}</div>
                  </div>
                </div>
              </div>
              <div class="info_box lastLine" style="background-color: #7f8cfd">
                <div>功率信息</div>
                <div class="tab mt-2">
                  <div class="item" v-for="(itev, indez) in data.power" :key="indez">
                    <div class="info_valOne">{{ itev.value }}</div>
                    <div class="info_name">{{ itev.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
import deployDialog from './dialog/deployDialog.vue'
import { queryWarnOrSysState, queryProjectOverviewOne, queryDeviceRealOnePar, queryConfiguredParameterOne } from '@/api/projectOverview/index'
export default {
  components: {
    deployDialog
  },
  props: {
    isView: {
      //展示还是配置
      type: Boolean,
      default: () => true
    },
    configured: {
      // 已配置
      type: Array,
      default: () => []
    },
    topSet: {
      //获取数据的配置参数params
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      info: {},
      data: {},
      isStart: true,
      timeInterval: null
    }
  },
  created() {
    this.setTime()
  },
  mounted() {
    this.getInfo()
    this.getData()
  },
  watch: {
    isView: {
      handler(newValue) {
        if (this.isView) this.getData()
      },
      deep: true
    }
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    this.timeInterval = null
  },
  methods: {
    setTime() {
      this.timeInterval = setInterval(() => {
        this.getInfo()
        this.getData()
      }, 20000)
    },
    getInfo() {
      queryWarnOrSysState().then((res) => {
        this.info = res.object
      })
    },
    getData() {
      queryProjectOverviewOne().then((res) => {
        this.isStart = false
        Object.keys(res.object).forEach((key) => {
          if (key == 'voltage' || key == 'current' || key == 'power' || key == 'powerTotal' || key == 'chargeTotal') {
            this.getPar(key, res.object[key], res.object.deviceCode)
          }
        })
      })
    },
    getPar(key, data, code) {
      let obj = {
        deviceCode: code,
        params: data
      }
      queryDeviceRealOnePar(obj).then((res) => {
        this.$set(this.data, key, res.object)
      })
    },
    setDeploy(num) {
      queryConfiguredParameterOne().then((res) => {
        let data1 = {
          deviceCode: 'DEVC09011696082',
          list: {
            voltage: [
              {
                id: null,
                createBy: null,
                createByName: null,
                createTime: '2023-09-13 11:18:34',
                updateBy: null,
                updateByName: null,
                updateTime: null,
                pageIndex: 0,
                pageSize: 0,
                messages: null,
                isDeleted: null,
                mapString1: null,
                mapString2: null,
                startTime: null,
                endTime: null,
                deviceCode: 'DEVC09011696082',
                batchNo: 'BATC09134454346',
                parameterCode: 'IA',
                parameterName: 'A相电流',
                parameterValue: '0.0',
                parameterValueName: '0.0A',
                subType: null
              }
            ],
            current: [
              {
                id: null,
                createBy: null,
                createByName: null,
                createTime: '2023-09-13 11:18:34',
                updateBy: null,
                updateByName: null,
                updateTime: null,
                pageIndex: 0,
                pageSize: 0,
                messages: null,
                isDeleted: null,
                mapString1: null,
                mapString2: null,
                startTime: null,
                endTime: null,
                deviceCode: 'DEVC09011696082',
                batchNo: 'BATC09134454346',
                parameterCode: 'IB',
                parameterName: 'B相电流',
                parameterValue: '0.0',
                parameterValueName: '0.0A',
                subType: null
              }
            ],
            power: [
              {
                id: null,
                createBy: null,
                createByName: null,
                createTime: '2023-09-13 11:18:34',
                updateBy: null,
                updateByName: null,
                updateTime: null,
                pageIndex: 0,
                pageSize: 0,
                messages: null,
                isDeleted: null,
                mapString1: null,
                mapString2: null,
                startTime: null,
                endTime: null,
                deviceCode: 'DEVC09011696082',
                batchNo: 'BATC09134454346',
                parameterCode: 'IC',
                parameterName: 'C相电流',
                parameterValue: '0.0',
                parameterValueName: '0.0A',
                subType: null
              }
            ],
            powerTotal: [
              {
                id: null,
                createBy: null,
                createByName: null,
                createTime: '2023-09-13 11:18:34',
                updateBy: null,
                updateByName: null,
                updateTime: null,
                pageIndex: 0,
                pageSize: 0,
                messages: null,
                isDeleted: null,
                mapString1: null,
                mapString2: null,
                startTime: null,
                endTime: null,
                deviceCode: 'DEVC09011696082',
                batchNo: 'BATC09134454346',
                parameterCode: 'PA',
                parameterName: 'A相功率',
                parameterValue: '0.0',
                parameterValueName: '0.0W',
                subType: null
              }
            ],
            chargeTotal: [
              {
                id: null,
                createBy: null,
                createByName: null,
                createTime: '2023-09-13 11:18:34',
                updateBy: null,
                updateByName: null,
                updateTime: null,
                pageIndex: 0,
                pageSize: 0,
                messages: null,
                isDeleted: null,
                mapString1: null,
                mapString2: null,
                startTime: null,
                endTime: null,
                deviceCode: 'DEVC09011696082',
                batchNo: 'BATC09134454346',
                parameterCode: 'UA',
                parameterName: 'A相电压',
                parameterValue: '228.0',
                parameterValueName: '228.0V',
                subType: null
              }
            ]
          }
        }
        if (Object.keys(res.object).length != 0) {
          this.$refs.deployDialog.value = res.object.deviceCode
          Object.keys(res.object.list).forEach((item) => {
            this.$refs.deployDialog[item] = res.object.list[item]
          })
          this.$refs.deployDialog.getList(1)
        }
      })
      this.setNum = num
      this.$refs.deployDialog.type = 0
      this.$refs.deployDialog.isView = true
      this.$refs.deployDialog.getOptions()
      this.$refs.deployDialog.dialogVisible = true
    },
    refresh(id) {
      this.configured.push(this.setNum)
    }
  }
}
</script>

<style lang="scss">
.show_box {
  .el-progress-bar .el-progress-bar__outer {
    background-color: #fff !important;
    border: 1px solid #ffb55e;
  }
}

.lastLine {
  .el-progress-bar .el-progress-bar__outer {
    background-color: #fff !important;
    border: 1px solid #96f8ce;
  }
}

.only_box {
  .el-progress-bar .el-progress-bar__outer {
    border: 1px solid #8f9afe;
  }
}
</style>
<style lang="scss" scoped>
.area {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 100%;
  .el-col {
    height: 40%;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .info_valOne {
    font-family: 'DIN';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
  }

  .info_name {
    font-family: 'SourceHan';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    min-height: 18px;
    line-height: 18px;
  }
}

.main_box {
  height: 30%;
}

.boxRow {
  display: flex;
  width: 100%;
  height: 100%;
}

.left_box {
  display: flex;
  background-color: #fff;
  width: calc((100% - 20px) / 2);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-right: 20px;
}

.left_img {
  width: 100%;
  height: 100%;
  object-fit: fit;
}

.only_box {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px;
}

.show_box {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: calc((100% - 20px) / 2);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-right: 20px;
  padding: 10px;

  .show_name {
    font-family: 'SourceHan';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #333333;
  }

  .show_unit {
    font-family: 'SourceHan';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #999999;
  }

  .show_valOne {
    font-family: 'DIN';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    color: #2cd5bc;
  }

  .show_valTwo {
    font-family: 'DIN';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    color: #df547b;
  }

  .show_img {
    height: 16px;
    object-fit: fit;
  }
}

.info_box {
  display: flex;
  flex-direction: column;
  padding: 10px;
  color: #fff;
  background-color: #fff;
  width: calc((100% - 40px) / 3);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-right: 20px;
}

.boxMain {
  border-radius: 8px;
  margin-right: 20px;
  background-color: #fff;
  width: calc((100% - 40px) / 3);
  height: 100%;
  border: 1px solid #ebeef5;
  padding: 12px 18px;
  position: relative;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
}

.boxMain_one {
  border-radius: 8px;
  margin-right: 20px;
  background-color: #fff;
  width: calc((50% - 20px) / 2);
  height: 100%;
  border: 1px solid #ebeef5;
  padding: 12px 18px;
  position: relative;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
}

.boxMain_two {
  border-radius: 8px;
  background-color: #fff;
  width: calc((100% - 20px) / 2);
  height: 100%;
  border: 1px solid #ebeef5;
  padding: 12px 18px;
  position: relative;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
}

.title {
  font-family: 'SourceHan';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

.name {
  font-family: 'SourceHan';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #999999;
}

.value {
  font-family: 'DIN';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: #333333;
}

.lastLine {
  margin-right: 0 !important;
}

.deploy {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  opacity: 0.9;
  background-color: #b2b2b2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.not_config {
  background-image: url('../../../assets/img/dataDel.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.line-title {
  width: 4px;
  height: 12px;
  background-color: #3276ff;
  margin-right: 10px;
  border-radius: 4px;
}

.my_img {
  width: 20%;
  object-fit: contain;
}

.h-15 {
  height: 15%;
}

.h-85 {
  height: 85%;
}

.h-50 {
  height: 50%;
}

.add_text {
  font-family: 'SourceHan';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #2cd5bc;
}
</style>
